<template>
  <div class="manage-table">
    <slot name="search"></slot>
    <div class="table-box">
      <vxe-table
        align="center"
        size="medium"
        highlight-hover-row
        resizable
        border
        stripe
        :data="source"
        :header-cell-class-name="headerStyle"
        :row-class-name="rowClass"
        height="100%"
        class="table-con"
        :sort-config="{ remote: true, trigger: 'cell' }"
        @sort-change="sortChangeEvent"
        row-id="id">
        <!-- <vxe-column type="checkbox" width="40" fixed="left"></vxe-column> -->
        <vxe-column type="seq" width="60" fixed="left" title="序号"></vxe-column>
        <vxe-column field="assObjName" title="姓名" min-width="100" fixed="left"></vxe-column>
        <vxe-column field="post" title="职级" min-width="120"></vxe-column>
        <vxe-column field="assOrgName" title="部门" min-width="120"></vxe-column>
        <!-- 年度考核 -->
        <template>
          <vxe-column field="yearScore" title="总得分" min-width="120" sortable>
            <template #default="{ row }">
              <div class="detail_box">
                <span v-if="row.yearScore">{{ row.yearScore }}分</span>
                <span v-else>-</span>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="firstScore" min-width="140">
            <template #header>
              <div>第一季度</div>
              <div class="percent">占比{{ assessRatio.firstRatio * 100 }}%</div>
            </template>
            <template #default="{ row }">
              <div class="detail_box">
                <span v-if="row.oneScore">{{ row.oneScore }}</span>
                <span v-else>-</span>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="secScore" min-width="140">
            <template #header>
              <div>第二季度</div>
              <div class="percent">占比{{ assessRatio.secRatio * 100 }}%</div>
            </template>
            <template #default="{ row }">
              <div class="detail_box">
                <span v-if="row.twoScore">{{ row.twoScore }}</span>
                <span v-else>-</span>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="thirdScore" min-width="140">
            <template #header>
              <div>第三季度</div>
              <div class="percent">占比{{ assessRatio.thirdRatio * 100 }}%</div>
            </template>
            <template #default="{ row }">
              <div class="detail_box">
                <span v-if="row.threeScore">{{ row.threeScore }}</span>
                <span v-else>-</span>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="fourthScore" min-width="140">
            <template #header>
              <div>第四季度</div>
              <div class="percent">占比{{ assessRatio.fourthRatio * 100 }}%</div>
            </template>
            <template #default="{ row }">
              <div class="detail_box">
                <span v-if="row.fourScore">{{ row.fourScore }}</span>
                <span v-else>-</span>
              </div>
            </template>
          </vxe-column>
        </template>
        <vxe-column field="assessRank" min-width="120" title="考核等次" v-if="isDisabled">
          <template #default="{ row }">
            <div class="good_con_img">
              {{ row.finalRank | AssessRank }}
            </div>
          </template>
        </vxe-column>
        <vxe-column title="备注" min-width="160">
          <template #default="{ row }">
            {{ row.remark }}
          </template>
        </vxe-column>
        <vxe-column title="考核等次结果" width="420" fixed="right" v-if="!isDisabled">
          <template #default="{ row }">
            <div class="good_con">
              <span
                class="back_good"
                :class="{ active: row.finalRank == item.id }"
                v-for="item in resultList"
                :key="item.id"
                @click="setEqual(item, row)">
                {{ item.name }}
              </span>
            </div>
          </template>
        </vxe-column>
      </vxe-table>
    </div>

    <slot name="pagination"></slot>
  </div>
</template>

<script>
export default {
  name: 'YearTable',
  emits: ['del-account', 'edit-account', 'import-account', 'update-account'],
  components: {},
  props: {
    source: {
      type: Array,
      default: () => [],
    },
    assessRatio: {
      type: Object,
      default: () => {
        return { firstRatio: 0.2, secRatio: 0.2, thirdRatio: 0.2, fourthRatio: 0.4 }
      },
    },
    isDisabled: Boolean,
  },
  data() {
    return {
      checkResult: [],
    }
  },
  filters: {
    AssessRank(val) {
      switch (val) {
        case '1':
          return '优秀'
        case '2':
          return '称职'
        case '3':
          return '基本称职'
        case '4':
          return '不称职'
        case '5':
          return '不定等次'
        default:
          break
      }
    },
  },
  watch: {},
  computed: {
    resultList() {
      const list = [
        { id: '1', name: '优秀' },
        { id: '2', name: '称职' },
        { id: '3', name: '基本称职' },
        { id: '4', name: '不称职' },
        { id: '5', name: '不定等次' },
      ]
      return list
    },
  },
  created() {},
  mounted() {},
  methods: {
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
    sortChangeEvent({ column }) {
      const data = {
        order: column.order === 'desc' ? '0' : column.order === 'asc' ? '1' : '',
      }
      this.$emit('changeSort', data)
    },
    /* 监听CheckBox变化 */
    onTableCheckChange(e) {
      const rowid = e.rowid
      if (e.checked) {
        this.checkResult.push(rowid)
        this.checkResult = [...new Set(this.checkResult)]
      } else {
        this.checkResult = this.checkResult.filter(item => item !== rowid)
      }
    },
    /* 监听CheckBox全选变化 */
    onTableCheckAll(e) {
      const records = e.records
      if (records.length > 0) {
        this.checkResult = [...new Set(records.map(item => item.id))]
      } else {
        this.checkResult = []
      }
    },
    checCheckboxkMethod2({ row }) {
      return row.isUpdate === '1'
    },
    setEqual(item, row) {
      this.$emit('setEqual', item, row)
    },
  },
}
</script>
<style lang="scss" scoped>
.manage-table {
  height: 100%;
  display: flex;
  flex-direction: column;
  .search-box {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e4eaf0;
    padding-bottom: 10px;
    .search-left {
      display: flex;
      align-items: center;
      .search-item {
        max-width: 240px;
      }
      .search-item + .search-item {
        margin-left: 20px;
      }
      .search-inp {
        width: 240px;
      }
      .el-icon-search {
        cursor: pointer;
      }
    }
    .search-right {
      display: flex;
      align-items: center;
      .search-item + .search-item {
        margin-left: 20px;
      }
      .info_box {
        color: #d9001b;
      }
      .info {
        display: flex;
        align-items: center;
        .info_list {
          margin-left: 20px;
        }
      }
    }
  }
  .table-box {
    flex: 1;
    position: relative;

    .table-con {
      ::v-deep .headerStyle {
        background-color: #f0f4f9;

        .vxe-cell {
          color: #333333;
          font-size: 14px;

          span {
            font-weight: 600;
          }
        }
      }

      ::v-deep .rowClass {
        .vxe-cell {
          color: #666666;
          font-size: 14px;

          p,
          div,
          span {
            font-size: 14px;
          }
        }
      }
      .good_con {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
      }
      .good_con_img {
        border: 1px solid #e6e6e6;
        border-radius: 20px;
        width: 80px;
        min-width: 80px;
        color: #fff;
        background-color: #e0c699;
        border-color: #e0c699;
        margin: auto;
      }
      .back_good {
        display: inline-block;
        cursor: pointer;
        margin: 0 8px;
        border: 1px solid #e6e6e6;
        border-radius: 12px;
        padding: 0 5px;
      }
      .active {
        color: #fff;
        background-color: #e0c699;
        border-color: #e0c699;
      }
      .detail_box {
        // position: relative;
        .word_tip {
          position: absolute;
          right: 1px;
          bottom: 10px;
          .callout {
            width: 0;
            height: 0;
            border-bottom: 10px solid red;
            border-left: 10px solid transparent;
          }
        }
      }
    }
  }
  .bg-pagination {
    margin-top: 10px;
  }
}
</style>
